<template>
	<div class="kaoguanguanli" >
    <div id="myElement" ref="myElement" style="position: relative;">
      <img src="../../../static/img/zhengshu.png" style="width: 7.5rem;">
      <div style="position: absolute; width: 100%; text-align: center; top: 1.7rem; font-size: 16px;">{{chengjiall.id_name}}</div>
      <div style="position: absolute; width: 100%; text-align: center; top: 3.0rem; font-size: 16px;">第{{chengjiall.ranking}}名 </div>
    </div>

    <div @click="shengcheng" style="color: #197cff; font-size: 14px; padding: 0.2rem; text-align: center; font-weight: bold;">生成证书</div>
    
	</div>
</template>

<script>
  import QRCode from 'qrcodejs2'
  import html2canvas from 'html2canvas';
	export default {
		name: 'kaoguanguanli',
		data() {
			return {
        search:{
          competition_id:parseInt(this.$route.query.competition_id),
          inv_user_id:parseInt(this.$route.query.inv_user_id),
        },
        imgurl:"",
        chengjiall:{
            "id_name": "",
            "ranking": "",
        }
			}

		},
    beforeDestroy() {

    },
		created() {
      this.getlist()
		},
		mounted() {
      var h = document.documentElement.clientWidth / 7.5 + 'px';
      document.documentElement.style.fontSize = h;



		},
		methods: {

      dataURLtoBlob(dataurl) {
          var arr = dataurl.split(","),
              mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]),
              n = bstr.length,
              u8arr = new Uint8Array(n)
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n)
          }
          return new Blob([u8arr], { type: mime })
      },

      shengcheng:function(){
        const element = this.$refs.myElement;
        html2canvas(element,{
          scale: 2, // 增加缩放比例
          dpi: 300, // 提高DPI
          useCORS: true // 允许跨域图片处理
        }).then(canvas => {
          const dataUrl = canvas.toDataURL();
          let file = this.dataURLtoFile(dataUrl,'证书'+ parseInt(Math.random()*100000) + '.png')


          // let file2 = this.dataURLtoBlob(dataUrl)
          // var myUrl = URL.createObjectURL(file2)
          // var a = document.createElement("a")
          // a.setAttribute("href", myUrl)
          // a.setAttribute("download", 'zhengshu.png')
          // a.setAttribute("target", "_blank")
          // let clickEvent = document.createEvent("MouseEvents")
          // clickEvent.initEvent("click", true, true)
          // a.dispatchEvent(clickEvent)


          this.uploadok(file)
        });
      },

      uploadok:function(file){

        let data = new FormData()
        data.append('file',file)
        axios.post(this.IP_URL+'/index/upload',data).then((response)=>{
          if(response.data.msg.code == 0){
            this.imgurl = response.data.data.url
            location.href = this.imgurl
          } else {
            this.$message.error(response.data.reason);
          }
        })

      },

      dataURLtoFile:function(dataurl, filename) {
      	let arr = dataurl.split(',');
      	let mime = arr[0].match(/:(.*?);/)[1];
      	let bstr = atob(arr[1]);
      	let n = bstr.length;
      	let u8arr = new Uint8Array(n);
      	while (n--) {
      		u8arr[n] = bstr.charCodeAt(n);
      	}
      	return new File([u8arr], filename, {
      		type: mime
      	});
      },


      getlist:function(){
        axios.get(this.IP_URL+'/api/enrolment/playerRankScore',{params:{
          competition_id:this.$route.query.competition_id,
          enrolment_id:this.$route.query.enrolment_id
        }}).then((response)=>{
        	if (response.data.msg.code == 0) {
            this.chengjiall = response.data.data[0]
        	} else {
        		this.$message.error(response.data.msg.info);
        	}
        })
      }


    }
	}
</script>


<style scoped >
  /deep/ .el-input__inner{}
  /deep/ .el-dialog__header{ padding: 0;}
  /deep/ .van-cell{ padding: 10px 0;}
</style>
